{extend name="Public/layout2.html"}
{block name="body"}


<div style="margin: 15px 20px;background-color: #9c9c9c">

    <div class="panel panel-default">
        <div class="panel-body">

            <div class="container-fluid">
                <form class="layui-form layui-form-pane" id="form1" method="post" action=""><form class="layui-form layui-form-pane" method="post" action="">
                <div class="row">
                    <div class="col-md-6" style="overflow: auto">

                        <div class="panel panel-info">
                            <div class="panel-heading">新建用户组</div>
                            <div class="panel-body">

                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="title" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item" pane="">
                                    <label class="layui-form-label">是否开启</label>
                                    <div class="layui-input-block" >
                                        <input type="checkbox" name="status" lay-skin="switch" checked lay-text="开启|关闭">
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">请选择权限</label>
                                    <div class="layui-input-block" >
                                         <input type="text" name="ruleslist"    id="rules" placeholder="请选择权限" autocomplete="off"  class="layui-input layui-unselect    ">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" style="overflow: auto;height: 500px">

                        <div class="panel panel-info">
                            <div class="panel-heading">请选择权限</div>
                            <div class="panel-body">
                                <h3>选择需要的权限</h3>
                            </div>
                            <ul class="list-group">
                                {volist name="rulelist" id="rule"}
                                <li class="list-group-item" pane="">
                                    <input type="checkbox"   lay-filter="check" name="rules[]" value="{$rule.id}" id="{$rule.id}">
                                    <span>
                                        <label for="{$rule.id}">{$rule.title}-----{$rule.name}</label>
                                    </span>
                                </li>
                                {/volist}

                            </ul>
                        </div>



                    </div>
                </div>
                </form>
                <!--<div style="display:inline-block;border: solid;width: 40%;height:500px;overflow: auto;">-->


                <!--</div>-->
                <!--<div style="float:right;display: inline-block;width:60%;height:500px;border: solid salmon;overflow: auto">-->


                <!---->
                <!--</div>-->
            </div>
        </div>
    </div>

</div>





{/block}
{block name="jslink"}
{__block__}
<script type="text/javascript">
    $(function () {

        var form = layui.form();
        form.on('checkbox(check)', function (data) {
            var arr=new Array();
            $('#form1 input:checked[lay-filter="check"]').each(function () {
                arr.push(this.value);
                $('#rules').val(arr.join(","))
            })
//            if (data.elem.checked) {
//                $("#rules").val($("#rules").val()+","+data.value);
////                $('#gsvalue_' + data.elem.dataset.fuckid).attr('lay-verify', 'required|fuckver');
//
//            } else {
////                $('#gsvalue_' + data.elem.dataset.fuckid).attr('lay-verify', '');
//
//            }
        });
    })
</script>
{/block}